<template>
    <div class="body">
        <div class="crat-list">
            <van-checkbox-group v-model="result" ref="checkboxGroup" @change="selectGoods">
                <van-swipe-cell v-for="(item,index) of cartList" :key="index">
                    <div class="goods-cart">
                        <!-- <van-checkbox-group v-model="result" ref="checkboxGroup"> -->
                            <van-checkbox :name="item.cart_id" checked-color="#3DCEB9"></van-checkbox>
                        <!-- </van-checkbox-group> -->
                        <van-card
                        :desc="item.goods_info"
                        :title="item.goods_name"
                        class="goods-card"
                        :thumb="$store.getters.base_url+item.image"
                        >
                            <template #price>
                                <span class="price">￥{{item.price}}</span>
                                <span class="spec">/{{item.name}}</span>
                            </template>
                            <template #footer>
                                <i class="iconfont icon-jianshao" v-if="item.num>1" @click="onChangeNum(2,item)"></i>
                                <p>{{item.num}}</p>
                                <i class="iconfont icon-zengjia" @click="onChangeNum(1,item)"></i>
                            </template>
                        </van-card>
                    </div>
                    <template #right>
                        <van-button @click="delCart(item.cart_id)" square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
            </van-checkbox-group>
        </div>
        <van-submit-bar :price="allPrice" button-text="去结算" @submit="onSubmit" :disabled="!result.length">
            <van-checkbox v-model="checked" @change="checkAll" checked-color="#3DCEB9">全选</van-checkbox>
            <!-- <template #tip>
                你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
            </template> -->
        </van-submit-bar>
    </div>
</template>
<script>
import {CartList,NumCart,DelCart} from '../ajax'
import {Toast} from 'vant'
export default {
    data() {
        return {
            cartList:[],
            checked:false,
            result:[],
            allPrice:0
        }
    },
    created(){
        this.getCartList();
    },
    methods:{
        onChangeNum(type,item){
            const data = {
                type,
                uid:this.$store.getters.wxUserInfo.userinfo.id,
                goods_id:item.goods_id,
                id:item.cart_id
            }
            NumCart(data).then(res=>{
                Toast('添加成功');
                this.getCartList();
            })
        },
        checkAll(e){
            if(e){
                this.$refs.checkboxGroup.toggleAll(true);
            }else{
                this.$refs.checkboxGroup.toggleAll();
            }
        },
        getCartList(){
            const data = {
                uid:this.$store.getters.wxUserInfo.userinfo.id
            }
            CartList(data).then(res=>{
                console.log(res);
                this.cartList = res;
            })
        },
        selectGoods(checkList){
            this.allPrice = 0;
            for(let i of this.cartList){
                for(let a of checkList){
                    if(i.cart_id == a){
                        this.allPrice+=parseFloat(i.price)*i.num*100;
                    }
                }
            } 
        },
        onSubmit(){
            console.log(this.result)
        },
        delCart(id){
            const data = {
                id,
                uid:this.$store.getters.wxUserInfo.userinfo.id
            }
            DelCart(data).then(res=>{
                Toast("删除成功");
                this.getCartList();
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    $white:#fff;
    $green:#3DCEB9;
    $red:#ee0a24;
    .body{
        .goods-card {
            margin: 0;
            background-color: $white;
            .price{
                font-size: 1rem;
            }
            .spec{
                color: #9b9b9b;
                font-weight: 500;
            }
        }
        .delete-button {
            height: 100%;
            background: $red !important;
        }
        .goods-cart{
            display: flex;
            align-items: center;
            padding: 0 0.4rem;
        }
        .van-card__footer{
            width: 5rem;
            position: absolute;
            top: 4.5rem;
            left: 16rem;
            display: flex;
            align-items: center;
            font-size: 1rem;
            .iconfont {
                font-size: 1.5rem;
                color: $green;
            }
            p{
                width: 4rem;
                text-align: center;
            }
        }
        .van-button--danger{
            background: $green;
        }
    }
</style>